<template>
	<view>
		<view class="content-item">
			<text class="left">{{title}}：</text>
			<view v-if="length < 3" style="margin-top: 20rpx;display: flex;">
				<view class="img-item" style="margin-right: 20rpx;" v-if="fileObj[0].fileData">
					<van-image @click="previewImage(0)" fit="cover" width="100" height="100" :src="fileObj[0].fileData" />
				</view>
				<view  class="img-item" v-if="fileObj[1].fileData">
					<van-image @click="previewImage(1)" fit="cover" width="100" height="100" :src="fileObj[1].fileData" />
				</view>
			</view>
		</view>
		<view class="content-img" v-if="length >= 3">
			<view v-for="(item,index) in 10" :key="index">
				<view class="img-item"  v-if="fileObj[index].fileData">
					<van-image @click="previewImage(index)" fit="cover" width="100" height="100" :src="fileObj[index].fileData" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import vanImage from '../../wxcomponents/vant/dist/image'
	import { previewImg } from '../../utils/previewImg.js'
	export default {
		components: {
			vanImage
		},
		props: {
			title: {
				type: String,
				required: true
			},
			idList: {
				type: Array,
				default: () => []
			},
			fileObj: {
				type: Object
			},
			length: {
				type: Number,
				default: 3
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			previewImage(index) {
				// console.log(index)
				let previewList = []
				for(let i = 0; i < 10; i++) {
					if(this.fileObj[i]){
						previewList.push(this.fileObj[i].fileData)
					}
				}
				previewImg(previewList, index)
			},
		}
	}
</script>

<style lang="scss">
	.content-img {
		flex-wrap: wrap;
		min-height: 280rpx;
	}
	.left {
		width: 250rpx;
		// margin-right: 37rpx;
	}
.detail-item {
			width: 750rpx;
			// height: 88rpx;
			display: flex;
			// align-items: center;
			line-height: 88rpx;
			padding-left: 20rpx;
			background-color: #fff;
			border-bottom: 2rpx solid #f5f5f5;
			// view {
			// 	padding-right: 30rpx;
			// }
			.left {
				width: 250rpx;
				// margin-right: 37rpx;
			}
			.right-content {
				word-break:break-all;
				flex: 1;
				padding-right: 30rpx;
			}
			.sign {
				width: 115rpx;
				height: 88rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.name {
				margin-right: 26rpx;
			}
		}
		.detail-img {
			background-color: #fff;
			display: flex;
			.img-item {
				width: 230rpx;
				height: 230rpx;
				// margin-left: 10rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
</style>
